{% extends "base.html" %}
{% block title %}时间信息{% endblock %}
{% block stylecontent %}
<link href="/static/css/styles.css" rel="stylesheet"/>
{% endblock %}
{% block content %}
<div class="container-fluid px-4">
    <ol class="breadcrumb mb-4">
        <li class="breadcrumb-item"></li>
    </ol>
    <div class="card mb-4">
        <div class="card-header">
            <i class="fas fa-chart-area me-1"></i>
            历年产量统计
        </div>
        <div class="card-body">
            <div id="mainOne" style="width: 100%;height: 450px;"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="card mb-4">
                <div class="card-header">
                    <i class="fas fa-chart-bar me-1"></i>
                    电影数据时长分布占比(饼图)
                </div>
                <div class="card-body">
                    <div id="mainTwo" style="width:100%;height: 600px;"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="card mb-4">
                <div class="card-header">
                    <i class="fas fa-chart-bar me-1"></i>
                    电影数据时长分布占比(漏斗图)
                </div>
                <div class="card-body">
                    <div id="mainTwo2" style="width:100%;height: 600px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block scriptcontent %}
<script>
  //历年产量统计
  var chartDom = document.getElementById('mainOne')
  var myChart = echarts.init(chartDom)
  var option
  option = {
    //标题
    title: {
      text: '历年产量统计',
      left: 'center',
      textStyle: {
        color: '#67c62b',
        fontSize: 14,
      },
    },
    //提示框
    tooltip: {
      trigger: 'item',
      textStyle: {
        color: '#000',
      },
    },
    //图例
    legend: {
      //type:'scroll',
      orient: 'vertical',
      right: 'right',
    },
    //横轴信息
    xAxis: {
      type: 'category',
      name: '年份',
      nameLocation: 'center',
      nameGap: 30,
      data:{{  x | safe }}
    },
    //纵轴信息
    yAxis: {
      type: 'value',
      name: '数量',
      nameLocation: 'center',
      nameGap: 30,
    },
    //系列列表
    series: [
      {
        name: '数量',
        type: 'bar',
        data:{{ y | safe }},
        showBackground:true,
        backgroundStyle:{
          color: 'rgba(183,196,227,0.5)',
        },
        itemStyle: {
          color: 'rgba(81,117,22,0.5)',
        },
        //动画效果
        animationDuration: 5000,
        animationEasing: 'bounceInOut',
      }],
  }
  option && myChart.setOption(option)
</script>
<script>
  // 电影数据时长分布占比(饼图)
  var chartDom = document.getElementById('mainTwo')
  var myChart = echarts.init(chartDom)
  var option
  //设置配置项
  option = {
    //标题
    title: {
      text: '电影数据时长分布占比(饼图)',
      left: 'center',
      textStyle: {
        color: '#67c62b',
        fontSize: 14,
      },
    },
    //提示框
    tooltip: {
      trigger: 'item',
      textStyle: {
        color: '#000',
      },
    },
    //图例
    legend: {
      //type:'scroll',
      orient: 'vertical',
      left: 'left',
      icon:'diamond'
    },
    //系列列表
    series: [
      {
        name: '时长占比',
        type: 'pie',
        radius: ['40%', '60%'],
        data: {{ movieTimeData |safe }},
        label:{
            show:true,
            formatter:'{b}:{c}个:[{d}%]',
            fontSize:18
        },
        //动画效果
        animationDuration: 5000,
        animationEasing: 'elasticInOut',
      }],
  }
  option && myChart.setOption(option)
</script>
<script>
  // 电影数据时长分布占比(漏斗图)
  var chartDom = document.getElementById('mainTwo2')
  var myChart = echarts.init(chartDom)
  var option
  //设置配置项
  option = {
    //标题
    title: {
      text: '电影数据时长分布占比(漏斗图)',
      left: 'center',
      textStyle: {
        color: '#67c62b',
        fontSize: 14,
      },
    },
    //提示框
    tooltip: {
      trigger: 'item',
      textStyle: {
        color: '#000',
      },
    },
    //图例
    legend: {
      //type:'scroll',
      orient: 'vertical',
      left: 'left',
      icon:'pin'
    },
    //系列列表
    series: [
      {
        name: '时长占比',
        type: 'funnel',
        radius: ['40%', '60%'],
        data: {{ movieTimeData |safe }},
        label:{
         show:true,
         formatter:'{b}:{c}个',
         fontSize:18,
         position:'inner'
    },
    //动画效果
    animationDuration: 5000,
    animationEasing: 'elasticInOut',
  }],
  }
  option && myChart.setOption(option)
</script>
{% endblock %}
